<template>
    <div>
        <div style="display: flex;justify-content: space-between;padding: 15px;">
            <div style="display: flex;justify-content: space-between;width: 35%;">
                <div style="display: flex;align-items: center;width: 100%;">
                    <div style="width: 15px;height: 15px;background-color: #cfeffe;display: flex;margin-right: 5px">
                    </div>
                    <div>已离职</div>
                </div>
                <div style="display: flex;align-items: center;width: 100%;">
                    <div style="width: 15px;height: 15px;background-color: #a8f8bb;display: flex;margin-right: 5px">
                    </div>
                    <div>再入职</div>
                </div>
                <div style="display: flex;align-items: center;width: 100%;">
                    <div style="width: 15px;height: 15px;background-color: #fedbd7;display: flex;margin-right: 5px">
                    </div>
                    <div>公司合计</div>
                </div>
                <div style="display: flex;align-items: center;width: 100%;">
                    <div style="width: 15px;height: 15px;background-color: #ffe8c9;display: flex;margin-right: 5px">
                    </div>
                    <div>一级部门</div>
                </div>
                <div style="display: flex;align-items: center;width: 100%;">
                    <div style="width: 15px;height: 15px;background-color: #fdfcd5;display: flex;margin-right: 5px">
                    </div>
                    <div>二级部门</div>
                </div>
            </div>
            <div>
                <el-button style="background-color: #2752fb;color: white;" @click="exportBtn">导出</el-button>
            </div>
        </div>
        <el-table ref="exportTableRef" :data="ReportTable" border
            :header-cell-style="{ background: '#f0f0f0', height: '48px' }">
            <el-table-column prop="userId" label="序号" width="55" />
            <el-table-column prop="username" label="姓名" width="150" />
            <el-table-column prop="timeOfEntry" label="入职时间" width="150" />
            <el-table-column prop="mobile" label="手机号" width="150" />
            <el-table-column prop="idNumber" label="身份证号码" width="180" />
            <el-table-column prop="theHighestDegreeOfEducation" label="学历" />
            <el-table-column prop="openingBank" label="开户行" width="180" />
            <el-table-column prop="firstLevelDepartment" label="一级部门" width="150" />
            <el-table-column prop="twoLevelDepartment" label="二级部门" width="150" />
            <el-table-column prop="workingCity" label="工作城市" width="150" />
            <el-table-column prop="socialSecurityComputerNumber" label="社保电脑号" width="150" />
            <el-table-column prop="providentFundAccount" label="公积金账号" width="150" />
            <el-table-column prop="leaveDate" label="离职时间" width="150" />
            <el-table-column prop="householdRegistrationType" label="户籍类型" width="150" />
            <el-table-column prop="participatingInTheCity" label="参保城市" width="150" />
            <el-table-column prop="socialSecurityMonth" label="社保月份" width="150" />
            <el-table-column prop="socialSecurityBase" label="社保基数" width="150" />
            <el-table-column prop="socialSecurity" label="社保合计" width="150" />
            <el-table-column prop="socialSecurityEnterprise" label="社保企业" width="150" />
            <el-table-column prop="socialSecurityIndividual" label="社保个人" width="150" />
            <el-table-column prop="providentFundCity" label="公积金城市" width="150" />
            <el-table-column prop="providentFundMonth" label="公积金月份" width="150" />
            <el-table-column prop="providentFundBase" label="公积金基数" width="150" />
            <el-table-column prop="accumulationFundEnterpriseBase" label="公积金企业基数" width="150" />
            <el-table-column prop="proportionOfProvidentFundEnterprises" label="公积金企业比例" width="150" />
            <el-table-column prop="individualBaseOfProvidentFund" label="公积金个人基数" width="150" />
            <el-table-column prop="personalRatioOfProvidentFund" label="公积金个人比例" width="150" />
            <el-table-column prop="totalProvidentFund" label="公积金合计" width="150" />
            <el-table-column prop="providentFundEnterprises" label="公积金企业" width="150" />
            <el-table-column prop="providentFundIndividual" label="公积金个人" width="150" />
            <el-table-column prop="pensionEnterpriseBase" label="养老企业基数" width="150" />
            <el-table-column prop="proportionOfPensionEnterprises" label="养老企业比例" width="150" />
            <el-table-column prop="pensionEnterprise" label="养老企业" width="150" />
            <el-table-column prop="personalPensionBase" label="养老个人基数" width="150" />
            <el-table-column prop="personalPensionRatio" label="养老个人比例" width="150" />
            <el-table-column prop="oldAgeIndividual" label="养老个人" width="150" />
            <el-table-column prop="unemploymentEnterpriseBase" label="失业企业基数" width="150" />
            <el-table-column prop="proportionOfUnemployedEnterprises" label="失业企业比例" width="150" />
            <el-table-column prop="unemployedEnterprise" label="失业企业" width="150" />
            <el-table-column prop="theNumberOfUnemployedIndividuals" label="失业个人基数" width="150" />
            <el-table-column prop="percentageOfUnemployedIndividuals" label="失业个人比例" width="150" />
            <el-table-column prop="unemployedEnterprise" label="失业个人" width="150" />
            <el-table-column prop="medicalEnterpriseBase" label="医疗企业基数" width="150" />
            <el-table-column prop="proportionOfMedicalEnterprises" label="医疗企业比例" width="150" />
            <el-table-column prop="medicalEnterprise" label="医疗企业" width="150" />
            <el-table-column prop="medicalPersonalBase" label="医疗个人基数" width="150" />
            <el-table-column prop="medicalPersonalRatio" label="医疗个人比例" width="150" />
            <el-table-column prop="medicalIndividual" label="医疗个人" width="150" />
            <el-table-column prop="baseOfIndustrialInjuryEnterprises" label="工伤企业基数" width="150" />
            <el-table-column prop="proportionOfIndustrialInjuryEnterprises" label="工伤企业比例" width="150" />
            <el-table-column prop="industrialInjuryEnterprise" label="工伤企业" width="150" />
            <el-table-column prop="fertilityEnterpriseBase" label="生育企业基数" width="150" />
            <el-table-column prop="proportionOfFertilityEnterprises" label="生育企业比例" width="150" />
            <el-table-column prop="childbearingEnterprise" label="生育企业" width="150" />
            <el-table-column prop="baseOfSeriousIllness" label="大病企业基数" width="150" />
            <el-table-column prop="proportionOfSeriouslyIllEnterprises" label="大病企业比例" width="150" />
            <el-table-column prop="bigDiseaseEnterprise" label="大病企业" width="150" />
            <el-table-column prop="personalBaseOfSeriousIllness" label="大病个人基数" width="150" />
            <el-table-column prop="personalProportionOfSeriousIllness" label="大病个人比例" width="150" />
            <el-table-column prop="aPersonOfGreatDisease" label="大病个人" width="150" />
            <el-table-column prop="providentFundNotes" label="公积金备注" width="150" />
            <el-table-column prop="socialSecurityNotes" label="社保备注" width="150" />
        </el-table>
    </div>
</template>

<script setup lang="ts">
defineProps(['ReportTable'])
import { getTablehistory } from '@/api/Socialtable'
import { ref } from 'vue'
const exportBtn = () => {
    getTablehistory(String(202302)).then(res => {
        let blob = new Blob([res.data], {
            type: 'application/vnd.ms-excel;charset=UTF-8'
        })
        let elm = document.createElement('a')
        //创建下载的链接
        elm.setAttribute('download', '黑马数据.xlsx')
        let href = window.URL.createObjectURL(blob)
        elm.href = href
        document.body.appendChild(elm)
        elm.click()
        //下载完成移除元素
        document.body.removeChild(elm)
        //释放掉blob对象
        window.URL.revokeObjectURL(href)
    })
}
</script>

<style scoped></style>